<template>
  <el-card
    class="system-status work-bench-team__card"
    shadow="never"
    body-style="display: flex; flex-direction: column; height: calc(100% - 20px); padding: 10px 15px;"
  >
    <div class="system-status__header work-bench-team__card__header">
      <span class="work-bench-team__card__title system-status__title">系统运行状态</span>
    </div>
    <div class="work-bench-team__card__body system-status__body">
      <ModelFrame :path="`/workbench/team/${$route.params.type}`" />
    </div>

    <EasyModal v-model="boilerDetailsDialogIsShow" title="设备详情" :width="800" :no-footer="true">
      <SourceHeatBoilerDetails />
    </EasyModal>
  </el-card>
</template>

<script>
// ============================== 导入依赖 ============================== //
import SourceHeatBoilerDetails from '@admin/views/Monitor/Source/SourceHeat/components/boiler-details/index.vue'
// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'SystemStatus',
  components: {
    SourceHeatBoilerDetails,
  },
  data() {
    return {
      /**
       * 锅炉详情对话框是否显示
       */
      boilerDetailsDialogIsShow: false,
    }
  },
  methods: {
    /**
     * @function 显示锅炉详情对话框
     */
    showBoilerDialog() {
      this.boilerDetailsDialogIsShow = true
    },
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
